<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <!--                 label-width="85px" -->
            <el-form ref="form" :model="equipmentSearch" :inline="true" size="mini">
                <el-form-item label="设备号：">
                    <el-input
                        v-model="equipmentSearch.number"
                        clearable
                        placeholder="请输入设备号"
                    ></el-input>
                </el-form-item>
                <!-- <el-form-item label="商户号：" promoterSearch>
                    <el-input v-model="equipmentSearch.business_id" clearable placeholder="请输入商户号"></el-input>
                </el-form-item>-->
                <el-form-item label="门店名称：">
                    <!-- <el-input v-model="equipmentSearch.shop_id" clearable placeholder="请输入门店名称"></el-input> -->
                    <el-select v-model="equipmentSearch.shop_id" clearable placeholder="请选择门店名称">
                        <el-option v-for="item in shopname" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(),currentPage=1">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn" v-if="jurisdiction.add_state === 1">
            <el-button size="medium" type="primary" @click="add()">添 加</el-button>
            <!-- <el-button size="medium" type="primary" @click="remove()">删 除</el-button> -->
        </div>
        <span v-else></span>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="equipmentTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <el-table-column type="selection" width="60px"></el-table-column>
                <!-- <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="设备编号" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商户号" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.business_id | filbusiness }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="城市" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.shop_id | filcity }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="位置" width="190px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.shop_id | fillong}},{{ scope.row.shop_id | fillat}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="投入时间" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time *1000 | formatDate}}  {{ scope.row.create_time*1000 | formatDateBehind }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="运行总时间" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time | countday }}天</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="门店名称" width="180px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.shop_id | shopname }}</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="门店地址" width="200px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.shop_id | filress}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="门店环境" width="120px">
                    <template slot-scope="scope">
                        <div @click="browseStoreUrl(scope.$index, scope.row)">
                            <img :src="scope.row.shop_id | filimg" style="width:50px;" alt="门店环境" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="小程序页面码" width="180px">
                    <template slot-scope="scope">
                        <span>
                            
                            <el-button v-if="scope.row.code_url === null || scope.row.code_url === ''" @click="createimg(scope.$index,scope.row)" size="mini">生成推广码</el-button>
                            <div v-else @click="browse(scope.$index, scope.row)">
                                <img :src="'https://dzylab.dpyun.site'+scope.row.code_url" style="width:50px;" alt="活动图片" />
                            </div>
                        </span>
                        <!-- <div @click="browse(scope.$index, scope.row)">
                            <img :src="scope.row.imageQR" style="width:50px;" alt="小程序页面码" />
                        </div> -->
                    </template>
                </el-table-column>
                <el-table-column label="加盟方式" width="120px">
                    <template slot-scope="scope">
                        <span>{{ jointype[scope.row.type] }}</span>
                    </template>
                        <!-- <span>{{  }}</span> -->
                </el-table-column>
                <el-table-column label="备注信息" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.note }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="运行状态" width="120px">
                    <template slot-scope="scope">
                        <span>{{ joinstate[scope.row.state] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="280px" v-if="jurisdiction.update_state === 1 || jurisdiction.delete_state === 1">
                    <template slot-scope="scope">
                        <el-button
                            v-if="jurisdiction.update_state === 1"
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            v-if="jurisdiction.update_state === 1"
                            size="small"
                            type="warning"
                            @click="details(scope.$index, scope.row)"
                        >详情</el-button>
                        <el-button
                            v-if="jurisdiction.delete_state === 1"
                            size="small"
                            type="danger"
                            @click="remove(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>

            <el-dialog width="600px" center :visible.sync="dialogVisible">
                <div style="text-align:center;">
                    <img width="250px" height="auto" :src="dialogImageUrl" alt />
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate} from '../../util/time.js';
import {date} from "../../util/time.js";
import {timedata} from "../../util/time.js";
let that 
export default {
    data() {
        return {
            // 分页
            jurisdiction: null,
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            dialogVisible: false, //放大图片的对话框显示
            dialogImageUrl: "", //放大图片的路径
            shopname: [],//数据拼接，设备对应的门店信息
            businessname: [],
            equipmentSearch: {
                //搜索
                number: "", //设备号
                business_id: "", //商户号
                shop_id: "" //门店名称
            },
            // jointype: [
            //     {
            //         type: "个人加盟",
            //         joinWayValue: "个人加盟"
            //     },
            //     {
            //         type: "企业加盟",
            //         joinWayValue: "企业加盟"
            //     },
            //     {
            //         type: "自营",
            //         joinWayValue: "自营"
            //     }
            // ],
            jointype:["个人加盟","企业加盟","自营"],
            joinstate:["停止运行","正常","故障","洗车"],
            equipmentTable: [
                {
                    number: "C11S101D1", //设备号
                    business_id: "8456", //商户
                    city: "深圳", //城市
                    location: "位置", //位置
                    create_time: "2020-07-30", //投入时间
                    clerkNumber: "8", //店员数量
                    shop_id: "南山分店", //门店名称
                    storeAdress: "深圳南山", //门店地址
                    businessHours: "8:00-23:00", //营业时间
                    storeUrl: "https://admin.chezhixi.top/record@2x.png", //门店环境
                    imageQR: "https://admin.chezhixi.top/record@2x.png", //小程序付款页面码
                    code_url: null
                },
                {
                    number: "C11S101D2", //设备号
                    business_id: "8456", //商户
                    city: "深圳", //城市
                    location: "位置", //位置
                    create_time: "2020-07-28", //投入时间
                    clerkNumber: "8", //店员数量
                    shop_id: "宝安分店", //门店名称
                    storeAdress: "深圳宝安", //门店地址
                    businessHours: "8:00-23:00", //营业时间
                    storeUrl: "https://admin.chezhixi.top/record@2x.png", //门店环境
                    imageQR: "https://admin.chezhixi.top/record@2x.png", //小程序付款页面码
                    code_url: null
                },
                {
                    number: "C11S10156", //设备号
                    business_id: "8456", //商户
                    city: "深圳", //城市
                    location: "位置", //位置
                    create_time: "2020-07-15", //投入时间
                    clerkNumber: "2", //店员数量
                    shop_id: "福田分店", //门店名称
                    storeAdress: "深圳福田", //门店地址
                    businessHours: "8:00-23:00", //营业时间
                    storeUrl: "https://admin.chezhixi.top/record@2x.png", //门店环境
                    imageQR: "https://admin.chezhixi.top/record@2x.png", //小程序付款页面码
                    code_url: null
                }
            ],
            selectTable: [] //选中要删除的数组
        };
    },
    filters:{
        // 加盟商的过滤
        filbusiness(name){
            that.businessname.forEach(item=>{
                name === item.id ? name = item.merchant_num : '';
            })
            return name
        },
        // 店铺的过滤
        shopname(id){
            that.shopname.forEach(item=>{
                id === item.id ? id = item.name : '';
            })
            return id
        },
        filcity(city){
            that.shopname.forEach(item=>{
                city === item.id ? city = item.city : '';
            })
            return city
        },
        fillong(long){
            that.shopname.forEach(item=>{
                long === item.id ? long = item.longitude : '';
            })
            return long
        },
        fillat(lat){
            that.shopname.forEach(item=>{
                lat === item.id ? lat = item.latitude : '';
            })
            return lat
        },
        filress(ress){
            that.shopname.forEach(item=>{
                ress === item.id ? ress = item.address : '';
            })
            return ress
        },
        filimg(img){
            that.shopname.forEach(item=>{
                img === item.id ? img = item.image_url : '';
            })
            return img
        },
        // 计算天数
        countday(day){
            let newday = timedata(date(day*1000))
            let time = Date.parse(new Date())/1000;
             return (time - newday)/86400
            // console.log(newday,(time - newday)/86400)
        },
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        filter(img){
            console.log(img)
            this.shopname.forEach(item=>{
                img === item.id ? img = item.image_url : '';
            })
            return img
        },
        searchClick() {
            // 查询
            // this.currentPage = 1;
            let data = {page:this.currentPage,list_rows:this.currentCount};
            for(var i in this.equipmentSearch) this.equipmentSearch[i] !== "" ? data[i] = this.equipmentSearch[i] : "";
            utils.request("/equipment/list", "post", JSON.stringify(data)).then(res => {
                console.log(res);
                this.equipmentTable = res.data.data.data;
                this.pageResultSize = res.data.data.total;
            });
        },
        add() {
            // 添加设备
            this.$router.push("/addEquipment");
        },

        browseStoreUrl(index, row) {
            that.shopname.forEach(item=>{
                row.shop_id === item.id ? this.dialogImageUrl = item.image_url : '';
            })
            console.log(this.dialogImageUrl)
            // this.dialogImageUrl = row.storeUrl;
            this.dialogVisible = true;
        },
        browse(index, row) {
            this.dialogImageUrl = 'https://dzylab.dpyun.site'+row.code_url;
            this.dialogVisible = true;
        },
        edit(index, row) {
            // 修改
            this.$router.push({ path: "/editEquipment", query: { row: JSON.stringify(row) } });
        },
        details(index, row) {
            // 详情
            this.$router.push({
                path: "/equipmentDetail",
                query: { row: JSON.stringify(row) }
            });
        },
        // 获取设备二维吗
        createimg(index,row){
            utils.request("/equipmentQR/equipmentQR","post",JSON.stringify({id: row.id})).then(resp=>{
                console.log(resp)
                this.equipmentTable[index].code_url = resp.data.data
            })
        },
        remove(index, row) {
            // 删除
            // if (this.selectTable.length != 0) {
            this.$confirm("此操作将删除选中的数据, 是否继续?", "删除提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(data => {
                    // for (let i = 0; i < this.selectTable.length; i++) {
                    // console.log(row.id);
                    utils.request("/equipment/delete","post",JSON.stringify({id:row.id})).then(resp=>{
                        console.log(resp)
                        this.equipmentTable.splice(index,1)
                        if(resp.data.code === 200){
                            this.equipmentTable.splice(index,1)
                            this.$message({
                                message: "删除成功！",
                                type: "success"
                            })
                        }else{return}
                    })
                    // utils
                    //     .request("store", "put", {
                    //         id: row.id, //店铺id
                    //         deleteFlag: 1 //0存续 1删除
                    //     })
                    //     .then(res => {
                    //         console.log(res);
                    //         if (res.data.code == 20000) {
                    //             // if (i == this.selectTable.length - 1) {
                    //             this.$message({
                    //                 showClose: true,
                    //                 type: "success",
                    //                 message: "删除成功!",
                    //                 duration: 2000
                    //             });
                    //             this.searchClick();
                    //             // }
                    //         } else if (res.data.code == 20004) {
                    //             this.$message({
                    //                 showClose: true,
                    //                 message: "请重新登录！",
                    //                 type: "error",
                    //                 duration: 2000
                    //             });
                    //             this.$router.push({ path: "/" });
                    //         } else {
                    //             this.$message({
                    //                 showClose: true,
                    //                 message: res.data.msg,
                    //                 type: "error",
                    //                 duration: 2000
                    //             });
                    //         }
                    //     });
                    // }
                })
                .catch(err => {
                    console.log("123");
                    this.$message({
                        showClose: true,
                        type: "info",
                        message: "已取消删除",
                        duration: 2000
                    });
                });
            // } else {
            //     this.$message({
            //         type: "warning",
            //         message: "您还没有选中要删除的数据!",
            //         duration: 2000
            //     });
            // }
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
            this.selectTable = val;
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick()
            // utils.request("stores", "post", {
            //         machine: this.equipmentSearch.number, //设备号
            //         shop_id: this.equipmentSearch.shop_id, //门店名称
            //         deleteFlag: 0, //查询存续
            //         pageStart: this.currentPage, //页面
            //         pageRequestSize: this.currentCount //请求数据数量
            //     }).then(res => {
            //         console.log(res);
            //         if (res.data.code === 20000) {
            //             let businessHours;
            //             let list = [];
            //             let data = res.data.dataList;
            //             data.forEach(item => {
            //                 if (!item.startTime && !item.endTime) {
            //                     businessHours = "";
            //                 } else {
            //                     businessHours =
            //                         item.startTime + "-" + item.endTime;
            //                 }
            //                 list.push({
            //                     id: item.id, //店铺id,一台设备一个店铺
            //                     number: item.machine, //设备号
            //                     business_id: "", //商户号
            //                     city: "", //城市
            //                     location: "", //位置
            //                     create_time: item.createTime, //投入时间
            //                     clerkNumber: item.clerkNum, //店员数量
            //                     shop_id: item.shop_id, //门店名称
            //                     storeAdress: item.address, //门店地址
            //                     businessHours: businessHours, //营业时间
            //                     storeUrl:
            //                         "https://admin.chezhixi.top/record@2x.png", //门店环境
            //                     imageQR:
            //                         "https://admin.chezhixi.top/record@2x.png" //小程序付款页面码
            //                 });
            //             });
            //             this.equipmentTable = list;
            //             this.pageResultSize =
            //                 res.data.pageResult.pageResultSize; //数据库总结果数
            //         } else if (res.data.code === 20004) {
            //             that.$message({
            //                 type: "error",
            //                 message: "请重新登录！"
            //             });
            //             that.$router.push("/");
            //         } else if (res.data.code === 20006) {
            //             // this.equipmentTable = [];
            //         }
            //     });
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick()
            // utils
            //     .request("stores", "post", {
            //         machine: this.equipmentSearch.number, //设备号
            //         shop_id: this.equipmentSearch.shop_id, //门店名称
            //         deleteFlag: 0, //查询存续
            //         pageStart: this.currentPage, //页面
            //         pageRequestSize: this.currentCount //请求数据数量
            //     })
            //     .then(res => {
            //         console.log(res);
            //         if (res.data.code === 20000) {
            //             let businessHours;
            //             let list = [];
            //             let data = res.data.dataList;
            //             data.forEach(item => {
            //                 if (!item.startTime && !item.endTime) {
            //                     businessHours = "";
            //                 } else {
            //                     businessHours =
            //                         item.startTime + "-" + item.endTime;
            //                 }
            //                 list.push({
            //                     id: item.id, //店铺id,一台设备一个店铺
            //                     number: item.machine, //设备号
            //                     business_id: "", //商户号
            //                     city: "", //城市
            //                     location: "", //位置
            //                     create_time: item.createTime, //投入时间
            //                     clerkNumber: item.clerkNum, //店员数量
            //                     shop_id: item.shop_id, //门店名称
            //                     storeAdress: item.address, //门店地址
            //                     businessHours: businessHours, //营业时间
            //                     storeUrl:
            //                         "https://admin.chezhixi.top/record@2x.png", //门店环境
            //                     imageQR:
            //                         "https://admin.chezhixi.top/record@2x.png" //小程序付款页面码
            //                 });
            //             });
            //             this.equipmentTable = list;
            //             this.pageResultSize =
            //                 res.data.pageResult.pageResultSize; //数据库总结果数
            //         } else if (res.data.code === 20004) {
            //             that.$message({
            //                 type: "error",
            //                 message: "请重新登录！"
            //             });
            //             that.$router.push("/");
            //         } else if (res.data.code === 20006) {
            //             // this.equipmentTable = [];
            //         }
            //     });
        }
    },
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        utils.request("/equipment/list", "post", JSON.stringify({page:this.currentPage,list_rows:this.currentCount})).then(res => {
                console.log(res);
                this.equipmentTable = res.data.data.data;
                this.pageResultSize = res.data.data.total;
        });
        utils.request("/shop/list", "post", JSON.stringify({page:1,list_rows:999999999})).then(res => {
            // console.log(res);
            this.shopname = res.data.data.data
        })
        utils.request("/business/list", "post", JSON.stringify({page:1,list_rows:999999999})).then(res => {
            // console.log(res);
            this.businessname = res.data.data.data
        })
    },
    beforeCreate() {
        that = this;
    },
};
</script>

<style lang="scss" scoped>
.all {
    background: #fff;
    border-radius: 16px;
    padding-top: 20px;
}
</style>


